<template>
  <div class="container">
  <div class="header">
	  <a>
		  <p></p>
		  <span v-text="isLogin" @click="gotoLogin"></span>
		  <i @click="quit" v-show="isLogin!=='请登录'"></i>
	  </a>
  </div>
    <div class="content">
      <ul class="list">
        <li @click="$router.replace('order')">
	        <span>我的订单</span>
          <i><img src="./icon_arrow_right_darkgray.png" alt=""></i>
        </li>
      </ul>
      <ul class="shopping">
        <li>
          <router-link to="/order">
          <i><img src="./1su4kcv21eg_22212270231600948691418.png" alt=""></i>
          <span>待付款</span>
          </router-link>
        </li>
        <li>
          <router-link to="/order">
            <i><img src="./2rsi345c8a_22212270231600948691450.png" alt=""></i>
            <span>待收货</span>
          </router-link>
        </li>
        <li>
          <router-link to="/">
          <i><img src="./n9q7tuhs6ao_22212270231600948691455.png" alt=""></i>
          <span>评价</span>
          </router-link>
        </li>
        <li>
          <router-link to="/">
          <i><img src="./q69ib1u9teg_22212270231600948691439.png" alt=""></i>
          <span>退款/售后</span>
          </router-link>
        </li>
      </ul>
      <ul class="list">
        <li>
          <div>
            <img src="./ucenter_icon_myassets.png" alt="">
          </div>
          <span>我的资产</span>
          <i><img src="./icon_arrow_right_darkgray.png" alt=""></i>
        </li>
        <li>
          <div>
            <img src="./ucenter_icon_coupon_new.png" alt="">
          </div>
          <span>优惠卷</span>
          <i><img src="./icon_arrow_right_darkgray.png" alt=""></i>
        </li>
        <li>
          <div>
            <img src="./ucenter_icon_collection.png" alt="">
          </div>
          <span>我的收藏</span>
          <i><img src="./icon_arrow_right_darkgray.png" alt=""></i>
        </li>
        <li @click="$router.replace('address')">
            <div>
              <img src="./ucenter_icon_address.png" alt="">
            </div>
            <span>地址管理</span>
            <i><img src="./icon_arrow_right_darkgray.png" alt=""></i>
        </li>
        <li>
          <div>
            <img src="./img.png" alt="">
          </div>
          <span>资质证照</span>
          <i><img src="./icon_arrow_right_darkgray.png" alt=""></i>
        </li>
        <li>
          <div>
            <img src="./xi.png" alt="">
          </div>
          <span>协议规则</span>
          <i><img src="./icon_arrow_right_darkgray.png" alt=""></i>
        </li>
        <li>
          <div>
            <img src="./ucenter_icon_feedback.png" alt="">
          </div>
          <span>帮助与反馈</span>
          <i><img src="./icon_arrow_right_darkgray.png" alt=""></i>
        </li>
      </ul>
	    <div class="bgtwo">
		    <button type="button" @click="quit" v-show="isLogin !== '请登录'">退出</button>
	    </div>
    </div>
    <div class="footer">
      <mi-nav></mi-nav>
    </div>

  </div>
</template>

<script>
import MiNav from '../../components/MiNav/MiNav.vue'
export default{
  name:'Profile',
  components:{MiNav},
        data() {
                return {
                        isLogin:  sessionStorage.getItem("token") ? sessionStorage.getItem('userName') : '请登录'
                };
        },
        methods:{
                gotoLogin(){
                        this.$miLoginWarning();
                },
                quit() {
                        sessionStorage.removeItem('token')
                        sessionStorage.removeItem('username')
                        this.isLogin = '请登录'
                }

}
}
</script>

<style scoped>
.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header{
  flex-shrink: 0;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url("./ucenter_bg_top.png") center no-repeat;
  padding: 0 20px;
}
.header a{
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.header a p {
	display: inline-block;
	width: 60px;
	height: 60px;
	background-image: url("./portrait.jpg");
	background-size: 60px;
}

.header a span {
	margin-left: 20px;
	font-size: 14px;
	color: #fff;
	height: 20px;
	width: 270px;
}

.header a i {
	width: 15px;
	height: 15px;
	background-image: url("./icon_arrow_right_darkgray.png");
	background-size: 15px;
	display: inline-block;
}


.header img{
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
.header span{
  margin-left: -200px;
}
.header a i img{
	flex-shrink: 0;
	width: 15px;
	height: 15px;
}
.content{
  flex-grow: 1;
  background-color: rgb(229, 229, 229);
}
.shopping{
  padding: 5px 0;
  display: flex;
  justify-content: space-around;
  margin-bottom: 5px;
  background-color: white;
}
.shopping a{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shopping i{
  width: 40px;
  height: 40px;
}
.shopping img{
  width: 100%;
}
.list{
  display: flex;
  flex-direction: column;
  background-color: white;
}
.list li{
  margin-right: 10px;
  padding-left: 20px;
  padding-right: 10px;
  display: flex;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid rgb(229, 229, 229);
}
.list a{
  display: flex;
  align-items: center;
}
.list div{
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.list div>img{
  width: 100%;
}
.list span{
  flex-grow: 1;
}
.list i{
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}
.list i>img{
  width: 100%;
}
.bgtwo {
	background-color: rgb(244, 244, 244);
	border-width: 0;
	border-color: rgb(229, 229, 229);
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bgtwo button{
	background-color: rgb(255, 255, 255);
	border-color: rgb(178, 178, 178);
	border-radius: 5px;
	border-width: 0;
	height: 35px;
	padding: 0 60px;
}
.footer{
margin-top: 10px;
  background-color: white;
}
</style>
